<template>
	<view class="share_poster">
		<image @click="showShare"
			src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/8d05c3038f754808a94151616ccbdb17.png"
			mode="aspectFit" class="inviteBtn"></image>
		<view>
			<view>
				<canvas style="width: 700rpx; height:1200rpx;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
			</view>
			<view class="hb_bottom">
				<view class="saveBox" @click="saveImg">
					<image
						src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/f66e3820420e4c7492403559acaa8309.png"
						mode="aspectFit" style="width: 70rpx;height: 70rpx;margin-bottom: 10rpx;"></image>
					<text>保存图片</text>
				</view>
				<view class="saveBox" @click="copyCode">
					<image
						src="https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/15dcca9254ed4d8bbadeba45c3a017b5.png"
						mode="aspectFit" style="width: 70rpx;height: 70rpx;margin-bottom: 10rpx;"></image>
					<text>复制链接</text>
				</view>
			</view>
		</view>


		<view>
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value=getQRCodeUrl() size='230' :options="{  margin:20,
						foreground: {
						    image: {
						      src: 'https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/e2454b052f7541c1822f7dcce87a43f3.png',
						      width: 50,
						      height: 50,
						      align: ['center', 'center'],
						      anchor: [0, 0]
						    }
							}
							}" @complete=" complete($event)"></uqrcode>
		</view>
	</view>
</template>

<script>
	import {
		getUserId
	} from '@/utils';
	import uqrcode from "../Sansnn-uQRCode/components/uqrcode/uqrcode.vue"
	export default {
		name: '',
		props: {},
		data() {
			return {
				ewmCode: '',
				aaas:false
			};
		},
		components: {
			uqrcode
		},

		onLoad() {
			console.log('1111', uni.getSystemInfoSync());
			// this.showShare()
		},
		onUnload() {},
		methods: {
			//获取支付宝scheme链接
			getQRCodeUrl() {
				return `alipays://platformapi/startapp?appId=2021004108644319&page=pages/tabbars/tabbars`
			},
			complete(e) {
				if (e.success == true) {
					this.$refs.uqrcode.toTempFilePath({
						success: res => {
							console.log('组件模式二维码转为图片路径', res);
							this.ewmCode = res.tempFilePath
							// this.$qrCodeResolve()
						}
					});
				}
			},
			async showShare() {
				console.log('1111111111112');
				uni.showLoading({
					title: "海报生成中"
				})
				// await this.$qrCoded
				// this.hbOutMengIsShow = true
				// this.showCloseSta = true

				var context = uni.createCanvasContext('firstCanvas')
				let bigImg = await this.urlToFile(
					'https://hangzhouhaoxiangzu.oss-cn-hangzhou.aliyuncs.com/563b875942c544e3b841f2f61699ee45.png')
				context.drawImage(bigImg, this.rpxToPx(20), this.rpxToPx(20), this.rpxToPx(570), this.rpxToPx(740))
				context.drawImage(this.ewmCode, this.rpxToPx(370), this.rpxToPx(760), this.rpxToPx(220), this.rpxToPx(
					220))

				context.setFontSize(20)
				context.setFillStyle('#000000')
				context.fillText('打开支付宝扫一扫', this.rpxToPx(150), this.rpxToPx(240));

				context.setFontSize(16)
				context.setFillStyle('#000000')
				context.fillText('哈哈哈哈', this.rpxToPx(30), this.rpxToPx(810));

				context.setFontSize(13)
				context.setFillStyle('#a4a4a4')
				context.fillText('旧衣服换现金，0运费上', this.rpxToPx(30), this.rpxToPx(870));

				context.setFontSize(13)
				context.setFillStyle('#a4a4a4')
				context.fillText('门，有偿回收旧衣服，最', this.rpxToPx(30), this.rpxToPx(910));

				context.setFontSize(13)
				context.setFillStyle('#a4a4a4')
				context.fillText('快两小时上门', this.rpxToPx(30), this.rpxToPx(950));

				context.stroke()
				uni.hideLoading()
				context.draw()
			},
			urlToFile(url) {
				return new Promise((resolve) => {
					uni.getImageInfo({
						src: url,
						success(res) {
							resolve(res.path)
							console.log('下载的图片', res);
						},
						fail(res) {
							console.log('fail -> res', res)
							uni.showToast({
								title: '网络异常',
								duration: 2000,
								icon: 'none'
							})
							// this.$emit('close')
						}
					})
				})
			},
			rpxToPx(rpx) {
				// return (rpx / 750) * uni.getSystemInfoSync().screen.width
				return (rpx / 750) * 375
			},
		}
	};
</script>

<style lang="scss" scoped>
	.share_poster {
		.inviteBtn {
			width: 100%;
			height: 110rpx;
		}

		.canvasBox {
			display: block;
			margin: 200rpx auto;
			width: 610rpx;
			height: 300rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
		}
	}
</style>